<template>
    <div class="page-wrapper">
        <div class="page-wrapper__body">
            <div class="page-container is-form" v-loading="isLoading">
                <el-form ref="sceneForm" :model="form" label-width="140px" label-position="top">
                    <el-form-item label="场次名称: " prop="sceneName">
                        <el-input placeholder="请输入场次名称：" v-model="form.sceneName"></el-input>
                    </el-form-item>
                    <el-form-item label="宣讲主题: " prop="topic">
                        <el-input placeholder="请输入宣讲主题：" v-model="form.topic"></el-input>
                    </el-form-item>
                    <el-form-item label="城市名称: " prop="cityName">
                        <el-input placeholder="请输入城市名称：" v-model="form.cityName"></el-input>
                    </el-form-item>
                    <el-form-item label="院校/地点名称: " prop="schoolName">
                        <el-input placeholder="请输入院校/地点名称：" v-model="form.schoolName"></el-input>
                    </el-form-item>
                    <el-form-item label="地址名称: " prop="fieldName">
                        <el-input placeholder="请输入地址名称：" v-model="form.fieldName"></el-input>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="活动日期: " prop="useDate">
                                <el-date-picker type="date" v-model="form.useDate" placeholder="活动日期" style="width:100%" ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="活动时间段: " prop="userTimes">
                                <el-time-picker v-model="form.useTimes" :picker-options="{format:'HH:mm'}" @change="handleUseTime" is-range value-format="HH:mm" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" style="width:100%;"></el-time-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="直播地址: " prop="liveUrl">
                        <el-input placeholder="请输入直播地址：" v-model="form.liveUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="回放地址: " prop="playbackUrl">
                        <el-input placeholder="请输入回放地址：" v-model="form.playbackUrl"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="form-footer">
            <el-button type="primary" @click="onSubmit" style="width:120px;">保存</el-button>
            <el-button @click="onBack">取 消</el-button>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    import {findDetail, saveOne, updateOne} from '../../api/bmw/bmwScene'

    export default {
        name: "sceneForm",
        data(){
            return{
                form:{
                    id: 0
                },
                isLoading: false
            }
        },
        methods:{
            handleUseTime(val){
                let form = this.form;
                let beginTime = moment(moment(form.useDate).format('YYYY-MM-DD') +' '+ val[0]).toDate();
                let endTime = moment(moment(form.useDate).format('YYYY-MM-DD') +' '+ val[1]).toDate();
                console.log(beginTime);
                console.log(endTime);
                form.beginTime = beginTime;
                form.endTime = endTime;
                this.form = {...form};
            },
            onSubmit(){
                this.isLoading = true;
                this.$refs['sceneForm'].validate((valid) => {
                    if (valid) {
                        if(this.form.id > 0){
                            this.onUpdate();
                        }else{
                            this.onSave();
                        }
                    }else {
                        this.isLoading = false;
                        return false;
                    }
                })
            },
            onBack(){
                this.$router.push({name:'BMWSceneList'});
            },
            async onSave(){
                let resp = await saveOne({entity: this.form})
                if(!this.qUtil.validResp(resp)){
                    this.$message({type: 'error', message: '数据保存失败!', showClose: true});
                    this.isLoading = false;
                    return false;
                }
                this.$message({type: 'success', message: '数据保存成功!', showClose: true});
                this.isLoading = false;
                this.onBack();
            },
            async onUpdate(){
                let resp = await updateOne({entity: this.form})
                if(!this.qUtil.validResp(resp)){
                    this.$message({type: 'error', message: '数据修改失败!', showClose: true});
                    this.isLoading = false;
                    return false;
                }
                this.$message({type: 'success', message: '数据修改成功!', showClose: true});
                this.isLoading = false;
                this.onBack();
            },
            async loadData(){
                this.isLoading = true;
                let resp = await findDetail(this.form.id);
                if(!this.qUtil.validResp(resp)){
                    this.$message({type: 'error', message: '数据加载失败!', showClose: true});
                    this.isLoading = false;
                    return false;
                }
                this.form = resp.data.model;
                let form = this.form;
                form.useTimes = [moment(this.form.beginTime).toDate(),moment(this.form.endTime).toDate()];
                this.form = {...form}
                this.isLoading = false;
            }
        },
        mounted(){
            this.form.id = parseInt(this.$route.query.id) || 0;
            if(this.form.id > 0){
                this.loadData();
            }
        }
    }
</script>

<style scoped>

</style>